<template>
  <section class="mr-bottom-20">
    <a-page-header
      :title="$route.meta.title"
      :sub-title="$route.meta.subTitle"
      :style="{ padding: '14px 24px 16px 24px' }"
    >
      <template #extra>
        <a-button type="primary" @click="handleClickToPushDetail">新增</a-button>
        <a-button type="danger">删除</a-button>
      </template>
    </a-page-header>

    <a-card hoverable :bordered="false">
      <div class="h20"></div>
      <a-table
        :columns="columns"
        :row-key="(record) => record.login.uuid"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template v-slot:name="{ text }">
          {{ text.first }} {{ text.last }}
        </template>
      </a-table>

      <div class="h20"></div>

      <ui-form :schema="schema" :dataSource="formData" :slotCount="1">
        <template #index1>
          <a-form-item label="上传头像">
            
          </a-form-item>
        </template>
        <template #footer>
          <a-button type="primary" @click="PrintLog">提交</a-button>
          <a-button type="primary">提交</a-button>
        </template>
      </ui-form>
    </a-card>
  </section>
</template>

<script>
import { PageHeader, Card, Button, Form, Table, Input, Upload } from "ant-design-vue";
import UIForm from 'components/form/UIForm'

import axios from "axios";

import {schema} from 'assets/js/Tmp'

const columns = [
  {
    title: "Email",
    dataIndex: "email", 
  }
];

export default {
  name: "Dashboard",
  components: {
    APageHeader: PageHeader,
    ACard: Card,
    AButton: Button,
    AForm: Form,
    AFormItem: Form.Item,
    ATable: Table,
    AInput: Input,
    UiForm: UIForm,
    AUpload: Upload,
  },
  data() {
    return {
      data: [],
      pagination: {},
      loading: false,
      columns,
      schema,
      formData: {
        loginName: '俗世游子'
      }
    };
  },
  mounted() {
    //this.fetch();
  },
  methods: {
    handleClickToPushDetail () {
      this.$router.push("/detail");
    },
    PrintLog () {
      console.info(this.formData);
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch(params = {}) {
      this.loading = true;
      axios
        .get("https://randomuser.me/api", { params: params })
        .then((data) => {
          const pagination = { ...this.pagination };
          // Read total count from server
          // pagination.total = data.totalCount;
          pagination.total = data.data.info.results;
          this.loading = false;
          this.data = data.data.results;
          this.pagination = pagination;
        });
    },
  }
};
</script>

<style lang="less" scoped>
</style>